<template>
  <bm-overlay
    ref="customOverlay"
    :class="{sample: true, active}"
    pane="labelPane"
    @draw="draw"
    @mouseover.native="active = true"
    @mouseleave.native="active = false"
  >
    <div @click="handleClick" class="news">
      <p class="news_title">{{text.areaName}}</p>
      <p class="news_text">均价{{text.avgSalePrice}}万/㎡</p>
      <p class="news_title">{{text.houseCount}}套</p>
    </div>
  </bm-overlay>
</template>

<script>
export default {
  props: ["text", "position"],
  data() {
    return {
      active: false
    };
  },
  watch: {
    position: {
      handler() {
        this.$refs.customOverlay.reload();
      },
      deep: true
    }
  },
  methods: {
    handleClick() {
      this.$emit("OnMap", this.text.areaId, this.text.statisticsType);
    },
    draw({ el, BMap, map }) {
      const { lng, lat } = this.position;
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat));
      el.style.left = pixel.x - 60 + "px";
      el.style.top = pixel.y - 20 + "px";
    }
  }
};
</script>

<style>
.sample {
  width: 80px;
  height: 80px;
  padding: 5px;
  background: #e1673c9c;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 5px #000;
  color: #fff;
  text-align: center;
  padding: 10px;
  position: absolute;
}
.sample.active {
  background: #efa02d;
  z-index: 3;
}
.news_title {
  font-size: 13px;
  color: #ffffff;
}
.news_text {
  font-size: 5px;
  color: #ffffff;
}
/* .news {
  width: 100px;
  height: 100px;
} */
</style>